<template>
    <div class="container">
        <u-form :model="form" ref="uForm" label-width="70px">
            <div class="item">
                <u-form-item label="姓名" prop="name" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.name" placeholder="请输入您的姓名" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="手机号" prop="phone" required :label-style="{color: '#0c3b96'}">
                    <u-input type="number" :maxlength="11" v-model="form.phone" placeholder="请输入您的手机号" />
                </u-form-item>
            </div>
            <!-- <div class="item">
                <u-form-item label="受评部门" prop="window" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.window" type="select" @click="show = true" placeholder="请选择部门" />
                    <u-picker mode="selector" v-model="show" :default-selector="[0]" :range="list" range-key="name" @confirm="selectWindow"></u-picker>
                </u-form-item>
            </div>-->
            <div class="item">
                <u-form-item label="受评部门" prop="region" required :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.region" type="select" placeholder="请选择部门" @click="showDept = true" />
                </u-form-item>
            </div>
            <div class="item">
                <u-form-item label="是否满意" required :label-style="{color: '#0c3b96'}">
                    <u-radio-group v-model="form.isSatisfy">
                        <u-radio shape="circle" :name="true" icon-size="30">是</u-radio>
                        <u-radio shape="circle" :name="false" icon-size="30">否</u-radio>
                    </u-radio-group>
                </u-form-item>
            </div>
            <div v-if="!form.isSatisfy" class="item">
                <u-form-item label="投诉意见" :label-style="{color: '#0c3b96'}">
                    <u-input v-model="form.content" type="textarea" auto-height :maxlength="1000" placeholder="请输入投诉意见" />
                </u-form-item>
            </div>
        </u-form>
        <div class="star">
            <div class="star-item">
                <div class="label">总体评价</div>
                <u-rate v-model="totalEstimate" active-color="#ffde00" inactive-color="#b2b2b2" gutter="20" size="40"></u-rate>
                <div class="star-desc">{{starDescArr[totalEstimate-1]}}</div>
            </div>
            <div class="star-item">
                <div class="label">办事效率</div>
                <u-rate v-model="workEfficiency" active-color="#ffde00" inactive-color="#b2b2b2" gutter="20" size="40"></u-rate>
                <div class="star-desc">{{starDescArr[workEfficiency-1]}}</div>
            </div>
            <div class="star-item">
                <div class="label">服务态度</div>
                <u-rate v-model="serviceAttitude" active-color="#ffde00" inactive-color="#b2b2b2" gutter="20" size="40"></u-rate>
                <div class="star-desc">{{starDescArr[serviceAttitude-1]}}</div>
            </div>
            <div class="star-item">
                <div class="label">业务水平</div>
                <u-rate v-model="professionalSkill" active-color="#ffde00" inactive-color="#b2b2b2" gutter="20" size="40"></u-rate>
                <div class="star-desc">{{starDescArr[professionalSkill-1]}}</div>
            </div>
        </div>
        <u-select mode="mutil-column-auto" v-model="showDept" :list="list" :default-value="selectDeptIndex" @confirm="confirm"></u-select>
        <u-button class="btn" type="primary" ripple shape="circle" @click="submit">提交</u-button>
    </div>
</template>
<script>
import { submitCSIAPI, getDeptsAPI } from "../api/satisfaction";

const starDescArr = [
    "非常不满意",
    "基本不满意",
    "基本满意",
    "满意",
    "非常满意",
];

export default {
    data() {
        return {
            starDescArr,
            totalEstimate: 5,
            workEfficiency: 5,
            serviceAttitude: 5,
            professionalSkill: 5,

            form: {
                window: "",
                windId: "",
                content: "",
                name: "",
                phone: "",
                isSatisfy: true,
                region: "",
            },
            show: false,

            showDept: false,
            // 地区数组
            list: [
                // {
                //     value: 0,
                //     label: 'xxx',
                //     children: [...]
                // }
            ],
            // 当前选择地区
            selectDeptList: [],

            rules: {
                window: [
                    {
                        required: true,
                        message: "请选择反馈问题类型",
                        trigger: ["change"],
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入问题描述",
                        trigger: ["blur", "change"],
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入提问人姓名",
                        trigger: ["blur"],
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入提问人手机号",
                        trigger: ["blur"],
                    },
                    {
                        max: 11,
                        message: "请输入正确手机号",
                        trigger: ["blur", "change"],
                        validator(r, v) {
                            return v.length === 11;
                        },
                    },
                ],
                region: [
                    {
                        required: true,
                        message: "请选择地区",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    computed: {
        selectDeptIndex() {
            return this.selectDeptList.map(item => item.extra)
        },
    },
    onShareAppMessage() {},
    onLoad() {
        wx.showLoading({
            title: "加载中...",
        });
        getDeptsAPI({}).then((res) => {
            let list = [...res.data];
            this.list = this.transDept(list);
            wx.hideLoading();
        });
    },
    methods: {
        transDept(arr) {
            let list = [];
            arr.forEach((item, index) => {
                list.push({
                    value: item.id,
                    label: item.name,
                    extra: index,
                    children: item.child ? this.transDept(item.child) : null,
                });
            });
            return list;
        },
        confirm(e) {
            this.selectDeptList = e;
            if (e.length) {
                this.form.region = "";
                e.forEach((item) => {
                    this.form.region += `${item.label} `;
                });
                this.form.townId = e[0].value;
                this.form.villageId = e[1].value;
            }
        },
        submit() {
            this.$refs.uForm.validate((valid) => {
                if (valid) {
                    submitCSIAPI({
                        ...this.form,
                        totalEstimate: this.totalEstimate,
                        workEfficiency: this.workEfficiency,
                        serviceAttitude: this.serviceAttitude,
                        professionalSkill: this.professionalSkill,
                    }).then((res) => {
                        wx.showToast({
                            title: "提交成功",
                            icon: "success",
                        });
                        setTimeout(() => {
                            this.$u.route({ type: "back" });
                        }, 1500);
                    });
                }
            });
        },
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>
<style scoped lang="scss">
.container {
    position: relative;
    padding: 5px 20px;
    min-height: 100vh;
    box-sizing: border-box;
    .item {
        border-bottom: 1px solid #efefef;
    }
    .btn {
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 50px;
    }
    .star {
        margin-top: 10px;
        .star-item {
            display: flex;
            align-items: center;
            margin: 15px 0;
            .label {
                font-size: 15px;
                color: #0c3b96;
                margin-right: 5px;
            }
            .star-desc {
                margin-left: 10px;
                font-size: 14px;
            }
        }
    }
}
</style>
